<template>
  <!-- 新增出口申请 -->
  <el-dialog
    v-model="dialogVisible"
    title="出口申请"
    width="50%"
    :before-close="handleClose"
  >
    <el-form
      v-loading="loading"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      size="large"
      label-position="top"
      status-icon
    >
      <el-row :gutter="24">
        <el-col :span="24" v-if="ruleForm.remarks">
          <el-alert
            class="mb-30"
            :title="`审核未通过，驳回原因：${ruleForm.remarks}`"
            type="error"
            show-icon
          />
        </el-col>

        <el-col :span="12">
          <el-form-item label="启运港：" prop="startHarborId">
            <c-port-select
              v-model="ruleForm.startHarborId"
              placeholder="请选择启运港"
              size="large"
              class="wh"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目的港：" prop="endHarborId">
            <c-port-select
              v-model="ruleForm.endHarborId"
              placeholder="请选择目的港"
              size="large"
              class="wh"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出口车辆：" prop="vinList">
            <el-select
              v-model="ruleForm.vinList"
              multiple
              class="wh"
              placeholder="请选择出口车辆"
            >
              <el-option
                v-for="item in carList"
                :key="item.id"
                :label="`${item.brand}-${item.series}-${item.model}  ${item.vin}`"
                :value="item.vin"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button size="large" :loading="buttonLoading" @click="handleClose"
        >取 消</el-button
      >
      <el-button
        size="large"
        :loading="buttonLoading"
        type="primary"
        @click="handleSubmit"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { deepClone } from "@/utils/index";
const emits = defineEmits(["change"]);
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const buttonLoading = ref(false);
const loading = ref(false);
const carList = ref([]);
const ruleFormRef = ref();
const ruleForm = ref({
  vinList: [],
});

const handleOpen = async (item) => {
  getCarList();
  dialogVisible.value = true;
  if (item && item.id) {
    try {
      loading.value = true;
      const url = "/sellerCarOutApply/getById";
      const res = await proxy.$get({ url, params: { id: item.id } });
      ruleForm.value = {
        id: res.sellerCarOutApply.id,
        remarks: res.sellerCarOutApply.remarks,
        startHarborId: res.sellerCarOutApply.startHarborId,
        endHarborId: res.sellerCarOutApply.endHarborId,
        vinList: res.outCarList.map((x) => x.vin),
      };
      console.log(ruleForm.value);
      // ruleForm.value = res
      loading.value = false;
    } catch (error) {
      loading.value = false;
    }
  }
};
const handleSubmit = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      buttonLoading.value = true;
      const data = deepClone(ruleForm.value);
      let url = "/sellerCarOutApply/apply";
      if (data.id) {
        url = "/sellerCarOutApply/reapply";
      }
      try {
        await proxy.$post({ url, data });
        ElMessage.success("操作成功");
        handleClose();
        emits("change");
        buttonLoading.value = false;
      } catch (error) {
        buttonLoading.value = false;
      }
    }
  });
};
const handleClose = () => {
  ruleFormRef.value.resetFields();
  dialogVisible.value = false;
  ruleForm.value = {
    carId: [],
  };
};
const getCarList = async () => {
  const url = "/carList/searchSellerCarList";
  const res = await proxy.$get({ url });
  carList.value = res;
};
const rules = ref({
  startHarborId: [
    {
      required: true,
      message: "请选择启运港",
      trigger: "change",
    },
  ],
  // endHarborId: [
  //   {
  //     required: true,
  //     message: "请选择目的港",
  //     trigger: "change",
  //   },
  // ],

  vinList: [
    {
      type: "array",
      required: true,
      message: "请选择车辆",
      trigger: "change",
    },
  ],
});
defineExpose({
  handleOpen,
});
</script>

